.message-box {  
    text-align: center;
    position: fixed; /* 固定在页面顶部 */  
    top: 1%; /* 距离页面顶部0px */  
    left: 50%; /* 水平居中的基础 */  
    transform: translateX(-50%); /* 通过平移自身宽度的50%来居中 */  
    padding: 10px;  
    border-radius: 4px;  
    display: none; /* 初始时隐藏 */  
    z-index: 1000; /* 可能需要设置一个高的z-index以确保它显示在其它元素之上 */  
}  

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.info {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}